<template>
    <div class="inside-comment">
        <!-- banner -->
        <div class="home-banner">
            <el-carousel trigger="click" height="100%">
                <el-carousel-item v-for="item in 4" :key="item">

                </el-carousel-item>
            </el-carousel>
            <div class="layout">
                <div class="btns">
                    <el-button type="primary" round size="large">查看招聘职位</el-button>
                    <el-button round size="large">了解医院文化</el-button>
                </div>
            </div>
        </div>
        <div class="layout">
            <div class="search-notice">
                <!-- 搜索 -->
                <div class="search-cmp-container">
                    <el-input v-model="keyword"  placeholder="请输入想要查找的关键词" clearable @keyup.enter="handleSearch"/>
                    <el-button type="primary" round size="large" @click="handleSearch">搜索</el-button>
                </div>
                <!-- 公告 -->
            </div>
            <!-- 最新职位列表 -->
            <div class="job-list-container">
                <h1>
                    <div class="column-tit001">
                        <router-link to="/recruitment/user/jobs">最新招聘职位</router-link>
                    </div>
                    <router-link class="more001" to="/recruitment/user/jobs"><span>更多职位</span></router-link>
                </h1>
                <ul class="job-list">
                    <li v-for="job in jobs" :key="job.id">
                        <router-link :to="`/recruitment/user/apply?jobId=${job.id}`">
                            <div class="top">
                                <p class="tit">{{ job.name }}</p>
                            </div>
                            <span class="period">报名时间：{{ dayjs(job.startTime).format('YYYY.MM.DD') }} - {{ dayjs(job.deadline).format('YYYY.MM.DD') }}</span>
                            <div class="requirements">
                                <div class="requirement-item">
                                    <el-icon><School /></el-icon>
                                    {{ getDegreeLabel(job.degree) || '学历不限' }}
                                </div>
                                <el-divider direction="vertical" />
                                <div class="requirement-item">
                                    <el-icon><Timer /></el-icon>
                                    {{ getExperienceLabel(job.workExperience) || '经验不限' }}
                                </div>
                                <el-divider direction="vertical" />
                                <div class="requirement-item">
                                    <el-icon><Collection /></el-icon>
                                    {{ job.major || '专业不限' }}
                                </div>
                                <el-divider direction="vertical" />
                                <div class="requirement-item">
                                    <el-icon><Location /></el-icon>
                                    {{ job.address || '地点未设置' }}
                                </div>
                                <el-divider direction="vertical" />
                                <div class="requirement-item">
                                    <el-icon><User /></el-icon>
                                    {{ job.age || '年龄不限' }}
                                </div>
                            </div>
                            <el-button type="primary">查看详情</el-button>
                        </router-link>
                    </li>
                </ul>
            </div>
        </div>
       
    </div>
</template>
  
<script setup>
import { ref } from 'vue'
import { School, Collection, Timer, User, Location } from '@element-plus/icons-vue'
import { selectSeekerPage } from '@/api/position'
import { useStore } from "vuex";
import { ElMessage } from 'element-plus'
import dayjs from 'dayjs'
import { useRouter } from 'vue-router'

const router = useRouter()
const store = useStore();
const keyword = ref('')

// 筛选配置
const filterGroups = ref([
  {
    id: 'degree',
    title: '学历要求',
    multiple: false, // 单选模式
    options: [
      { value: '', label: '不限' },
      { value: '1', label: '初中及以下' },
      { value: '2', label: '中专/中技' },
      { value: '3', label: '高中' },
      { value: '4', label: '大专' },
      { value: '5', label: '本科' },
      { value: '6', label: '硕士' },
      { value: '7', label: '博士' }
    ]
  },
  {
    id: 'workExperience',
    title: '工作经验',
    multiple: true, // 单选模式
    options: [
      { value: '', label: '不限' },
      { value: '1', label: '应届生' },
      { value: '2', label: '1-3年' },
      { value: '3', label: '3-5年' },
      { value: '4', label: '5年以上' }
    ]
  }
]);

// 获取学历标签
const getDegreeLabel = (degreeValue) => {
  const degreeGroup = filterGroups.value.find(g => g.id === 'degree');
  if (!degreeGroup) return degreeValue;
  
  const option = degreeGroup.options.find(o => o.value === degreeValue);
  return option ? option.label : degreeValue;
};

// 获取经验标签
const getExperienceLabel = (experienceValue) => {
  const expGroup = filterGroups.value.find(g => g.id === 'workExperience');
  if (!expGroup) return experienceValue;
  
  const option = expGroup.options.find(o => o.value === experienceValue);
  return option ? option.label : experienceValue;
};

const params = {
    groupId: store.state.base.userInfo.groupId,
    currentPage: 1,
    pageSize: 9
}
const jobs = ref([])
//获取最新职位
const fetchJobs = async() => {
    try {
        const res = await selectSeekerPage(params)
        jobs.value = res.data.list
    }catch (error) {
        ElMessage.error('获取职位列表失败')
    }
}
fetchJobs()

const handleSearch = () => {
  if (keyword.value.trim()) {
    router.push(`/recruitment/user/jobs?keyword=${keyword.value.trim()}`)
  }
}
</script>
  
<style lang="scss" scoped>
    .inside-comment {
        .home-banner {
            position: relative;
            .el-carousel {
                height: px2rem(500);
                .el-carousel__container {
                    height: 100%;
                }
                .el-carousel__item {
                    background-color: #99a9bf;
                }
            }
            .layout {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%);
                .btns {
                    display: flex;
                    justify-content:center;
                    .el-button {
                        font-size: px2rem(18);
                    }
                }
            }
        }
        .search-notice {
            margin-top: px2rem(40);
            background: #f8f9fa;
            padding: px2rem(20);
            border-radius: px2rem(10);
            .search-cmp-container {
                border:1px solid var(--el-color-primary);
                border-radius:100px;
                display: flex;
                padding:px2rem(5) px2rem(5) px2rem(5) px2rem(12);
                :deep(.el-input__wrapper) {
                    box-shadow: unset;
                    background-color: transparent;
                }
                input {
                    border-radius: 100px;
                }
                .el-button {
                    font-size: px2rem(18);
                }
            }
        }
        .job-list-container {
            margin-top: px2rem(40);
            margin-bottom: px2rem(80);
            h1 {
                display: flex;
                align-items: center;
                justify-content: space-between;
            }
            .job-list {
                padding: 0;
                margin-top: px2rem(40);
                display: flex;
                flex-wrap: wrap;
                gap: 1.33%;
                li {
                    width: 32.3%;
                    margin-bottom: px2rem(20);
                    a {
                        box-sizing: border-box;
                        display: block;
                        width: 100%;
                        height: 100%;
                        border-radius: px2rem(10);
                        box-shadow: 0 0 10px rgba(#000,0.1);
                        padding: px2rem(30);
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        .top {
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            .tit {
                                font-size: px2rem(18);
                                color: var(--el-color-primary);
                            }
                            
                        }
                        .period {
                            font-size: px2rem(16);
                            color: #666;
                            line-height: 1;
                            margin-top: px2rem(20);
                        }
                        .requirements {
                            margin-top: px2rem(20);
                            display: flex;
                            align-items: center;
                            flex-wrap: wrap;
                            gap: px2rem(5);
                            font-size: px2rem(14);
                            line-height: 1;
                            color: #666;
                            .requirement-item {
                                display: flex;
                                align-items: center;
                            }
                        }
                        .el-button {
                            width: 100%;
                            margin-top: px2rem(20);
                        }
                    }
                }
            }
        }
    }
    @media (max-width:960px) {
        .inside-comment {
            .home-banner .el-carousel {
                height: 37vw;
            }
            .job-list-container .job-list {
                margin-top: 20px;
                li {
                    width: 100%;
                    margin-bottom: 10px;
                }
            }
        }
    }
</style>
  